	<template>
		<div class="orderDetail" style="text-align:center;">
			<!--内容模块-->
			<div class="orderDetail-con">
				<div style="width:100%;height:100px;background: #FF8855;position: absolute;top:0;left: 0;text-align: left;">

				</div>

				<p style="position: relative;padding:0 40px;text-align: center; padding-top:10px;">
					<span  style="color:#fff!important;" v-if="order.status==0">已取消</span>
					<span  style="color:#fff!important;" v-else-if="order.status==10">未支付</span>
					<span  style="color:#fff!important;" v-else-if="order.status==20">已支付</span>
					<span  style="color:#fff!important;" v-else-if="order.status==30">已发货</span>
					<span  style="color:#fff!important;" v-else-if="order.status==40">完成</span>
				</p>
				<van-row style="margin:10px auto 0 auto;padding:10px 0;background: #fff!important;width:90%;position: relative;z-index:99;border-radius: 10px;box-shadow:0px 10px 5px #ccc;">
					<van-col span="3" style="line-height: 50px;">
						<van-icon name="location" />
					</van-col>
					<van-col span="21" style="text-align: left;font-size:14px;padding-right:10px;">
						<van-row >
							<van-col span="12">
								收货人:{{address.username}}
							</van-col>
							<van-col span="12">
								电话:{{address.mobile}}
							</van-col>
							<van-col span="24" style="margin:5px 0;">
								收货地址:{{address.regions_name+address.address}}
							</van-col>
						</van-row>
					</van-col>
				</van-row>


				<!--<van-cell-group  style="text-align: left;">-->
				<!--<van-cell title="您的订单已支付完成，请等待配货" icon="checked" style="color:rgb(255, 136, 85)"/>-->
				<!--</van-cell-group>-->
				<!--单据信息-->
				<div style="text-align:left;font-size:14px;padding:5px 10px;margin-bottom:10px;background: #fff;">
					<p style="padding-top:10px;">物流订单号：123456789</p>
					<p style="padding:10px 0;">
						<!--{{orderDetail.DC}}-->
					</p>
					<div style="display: flex;margin:10px 0;" v-for="(items,index) in order.goods" :key="index">
						<img v-if="items.item.images.length" :src="$http.IMGURL+items.item.images" style="width:20%;height:80px;" alt="">
						<img v-else style="width:20%;height:80px;" src="../../../assets/noimg.jpg"  alt="">
						<div style="height:80px;width:80%;padding:0 5px;position: relative;">
							<p style="color:#000;margin:0;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
								{{items.item.title}}
							</p>
							<p style="text-align: left;width:100%;margin:5px 0;color:#bbb;font-size:12px;">
								<span v-for="(v,k,index) in items.item.spec_data" :key="index">{{k}}:{{v}} </span>
							</p>
							<p style="text-align:right;color:#000;margin:0;">
								￥{{items.price}}
							</p>
							<p style="text-align:right;color:#888;margin:0;font-size:12px;">
								X {{items.total}}
							</p>
						</div>
					</div>

					<div style="margin:20px 0;background: #fff;">
						<van-row style="color:#bbb;">
							<van-col span="12" style="margin:0;text-align: left;">
								商品小计
							</van-col>
							<van-col span="12" style="text-align: right">
								￥{{order.goods_price}}
							</van-col>
						</van-row>
						<van-row style="color:#bbb;border-bottom:1px solid #bbb;margin:5px 0;">
							<van-col span="12" style="margin:0;text-align: left;">
								运费
							</van-col>
							<van-col span="12" style="text-align: right;">
								￥{{order.freight_fee}}
							</van-col>
						</van-row>
						<van-row  style="font-size:16px;">
							<van-col span="12" style="margin:3px 0;text-align: left;">
								实付款(含运费)
							</van-col>
							<van-col span="12" style="text-align: right;color:rgb(243, 112, 21)">
								￥{{order.price}}
							</van-col>
						</van-row>
					</div>


					<div style="margin:20px 0;">
						<van-row style="font-size:12px;color:#888;">
							<van-col span="24">
								支付方式:{{paytext}}
							</van-col>
							<van-col span="24">
								订单编号:{{order.order_sn}}
							</van-col>
							<van-col span="24">
								创建时间:{{order.created_at}}
							</van-col>
						</van-row>
					</div>


					<!--待支付的按钮-->
					<van-row style="padding:5px 0;" v-if="order.status==10">
						<van-col offset="10" span="14" style="display: flex;">
							<van-button type="danger" style="width:50%;height:auto;line-height:30px;" @click="payFn(order)">立即付款</van-button>
							<van-button style="width:50%;height:auto;line-height:30px;" @click="deleteOrderFnMoney(order.id,order)">取消订单</van-button>
							<!--<van-col span="12">-->
								<!--<van-button type="danger" style="width:100%;height:auto;line-height:30px;" @click="payFn(order)">立即付款</van-button>-->
							<!--</van-col>-->
							<!--<van-col span="12">-->
								<!--<van-button style="width:100%;height:auto;line-height:30px;" @click="deleteOrderFnMoney(order.id,order)">取消订单</van-button>-->
							<!--</van-col>-->
						</van-col>
					</van-row>
					<!--已支付的按钮-->
					<van-row style="padding:5px 0;" v-else-if="order.status==20">
						<van-col offset="12" span="12">
							<van-col offset="12" span="12">
								<van-button type="danger" style="height:auto;line-height:30px;" >查看物流</van-button>
							</van-col>
						</van-col>
					</van-row>
					<van-row style="padding:5px 0;" v-else-if="order.status==30">
						<van-col offset="12" span="12">
							<van-col offset="12" span="12">
								<van-button type="danger" style="height:auto;line-height:30px;" >确认收货</van-button>
							</van-col>
						</van-col>
					</van-row>

					<van-row style="padding:5px 0;" v-else-if="order.status==30">
						<van-col offset="12" span="12">
						<van-col offset="12" span="12">
							<van-button type="danger" style="height:auto;line-height:30px;" >交易完成</van-button>
						</van-col>
						</van-col>
					</van-row>

				</div>
			</div>
		</div>
	</template>

	<script>
	import { mapState } from 'vuex';
	import axios from 'axios';
	let Base64 = require('js-base64').Base64;
		export default {
			name: "orderDetail",
		data(){
			return {
				id:'',
				orderDetail:{
				orderNumber:'123456',
				addTime:'2018-9-5 17:10:00',//创建时间
				fukuanTime:'2018-9-5 17:10:10',//付款时间
				fahuoTime:'2018-9-6 17:10:10',//发货时间
				cjTime:'2018-9-8 17:10:10',//成交时间
				address:{
					name:'李四',
					phone:'12345678901',
					text:'浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼'
				},
				payType:'支付宝',
				DC:'春熙路店',
				title:'男士长袖t恤夏季薄款纯色体恤',
				imgPath:'https://img10.360buyimg.com/n8/jfs/t20905/336/1717407816/216125/675b3a86/5b33261cNab61f6e5.jpg',
				color:'白色',
				song:'顺风快递',
				size:'XL',
				price:76.5,
				num:1,
				yunfei:5,
				status:0,
				},
				payType:[
				{
					type:0,
					name:'未支付'
				},
				{
					type:1,
					name:',在线支付'
				},
				{
					type:2,
					name:'余额支付'
				},
				{
					type:21,
					name:'后台支付'
				},
				{
					type:3,
					name:'货到付款'
				},
				{
					type:11,
					name:'微信支付'
				},
				{
					type:12,
					name:'支付宝支付'
				},
				{
					type:13,
					name:'银联支付'
				},
				{
					type:4,
					name:'收银台现金收款'
				},
				{
					type:21,
					name:' 返现余额'
				},
				{
					type:22,
					name:'存款余额'
				},
				],
				paytext:'',
				order:{},
				address:{},
			}
		},
		computed: {
			...mapState('shop',{
			details:"data",
			sever:'sever',
			pay:'pay',
			})
		},
		methods:{
			onClickLeft(){
			this.$router.go(-1);
			},
			getOrderDetails(){
			this.$http.order.get('shop/order/'+this.id)
				.then((res)=>{
				// console.log(res.data.data)
				if(!res.data.code){
					this.order = res.data.data;
					for(var i=0;i<this.payType.length;i++){
						if(this.payType[i].type==this.order.pay_type){
						this.paytext = this.payType[i].name;
						}
					}
					this.address = JSON.parse(Base64.decode(this.order.address));
					// console.log(this.address)
				}
				// console.log(res.data.data)
				}).catch((err)=>{
				console.log(err)
			})
			},
			// 取消订单
			deleteOrderFnMoney(idx,obj){
			// console.log(obj)
			this.$dialog.confirm({
				title: '取消',
				message: '确认取消该条商品吗？'
			}).then(() => {
				// http://order.api.bxfzrj.com:8080/api/shop/order/{order_id
				this.$http.order.delete('shop/order/'+idx)
				.then((res)=>{
					// console.log(res.data);
					if(!res.data.code){

					this.$toast.success('取消订单成功');

					obj.status = 0;

					// this.getOrderList()
					}else{
					this.$toast(res.data.message);
					}
				}).catch((err)=>{
				// console.log(err.message)
				this.$toast(err.message);
				})
				// console.log(idx)

			}).catch(() => {
				// on cancel
			});
			},
			//立即付款
			payFn(con){
				this.$router.push({ name: "shop_pay",params:{id:con.id}});
			},
			//获取cookie
			getCookie (cname) {
			var name = cname + "=";
			var ca = document.cookie.split(';');
			for (var i = 0; i < ca.length; i++) {
				var c = ca[i];
				while (c.charAt(0) == ' ') c = c.substring(1);
				if (c.indexOf(name) != -1){
				return c.substring(name.length, c.length);
				}
			}
			return "";
			},
		},
		mounted(){
			this.$toast.loading({
				mask: true,
				message: '加载中...',
				duration: 1000
			});
			// console.log(this.$route.params.order_id)

			if(this.$route.params.order_id){
				document.cookie = 'orderDetail_id' + "=" + this.$route.params.order_id;
				this.id= this.$route.params.order_id
			}else if(this.getCookie('orderDetail_id')){
				var id = this.getCookie('orderDetail_id');
				this.id= this.$route.params.order_id = id;
			}
			this.getOrderDetails();
		}
		}
	</script>

	<style scoped>
	.orderDetail-con .van-icon-checked{
		color:#F2C617!important;
	}
	</style>
